<template>
	<view class="tab">
		<!--底部导航栏-start -->
		<view class="item" v-for="(item,index) in list" :key="index" @click="selectCode(index,item.url)">
			<image class="icon" :src="item.icon" mode="aspectFit" v-show="tabCode!=index"></image>
			<image class="icon" :src="item.selectIcon" mode="aspectFit" v-show="tabCode==index"></image>
			<view :class="['title',{select:tabCode!=index}]">{{item.name}}</view>
		</view>
		<!--底部导航栏-end -->
	</view>
</template>

<script>
	export default {
		name: 'TabBarView',
		props: {
			tabCode: String,
		},
		data() {
			return {
				tab: 0, //底部导航栏的控制变量，登录后去判断底部是哪个端的底部
				list: null, //底部导航栏为空，通过上面标识去改变
				// 客户端
				tabList: [{
					"url": "/pages/index/index",
					"icon": "/static/img/tabbar/home.png",
					"selectIcon": "/static/img/tabbar/home_select.png",
					"name": "首页"
				}, {
					"url": "/pages/featureCenter/index",
					"icon": "/static/img/tabbar/feature.png",
					"selectIcon": "/static/img/tabbar/feature_select.png",
					"name": "功能中心"
				}, {
					"url": "/pages/my/index",
					"icon": "/static/img/tabbar/user.png",
					"selectIcon": "/static/img/tabbar/user_select.png",
					"name": "个人中心"
				}],

				// {
				// 	"url": "/pages/message/index",
				// 	"icon": "/static/img/tabbar/message.png",
				// 	"selectIcon": "/static/img/tabbar/message_select.png",
				// 	"name": "消息中心"
				// }, 

			}
		},
		mounted() {
			this.selectTab()
		},
		methods: {
			// 选择导航栏
			selectTab() {
				this.list = this.tabList
			},
			// 选中的图标
			selectCode(e, url) {
				console.log(url);
				uni.switchTab({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab {
		height: 120rpx;
		width: 100%;
		background-color: #fff;
		display: flex;
		z-index: 999;
		position: fixed;
		bottom: 0;
		border-top: 1px solid #E8E8E8;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 50%;

			.icon {
				height: 44rpx;
				width: 44rpx;
			}

			.title {
				font-size: 10px;
				font-weight: 400;
			}

			.select {
				color: #BDAABD;
			}
		}
	}
</style>